{% extends "templates/main_template.html.j2" %}

{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}
{% import "macros/user_name.html.j2" as USER_NAME %}


{% block title %}
  {{ USER_NAME.VALUE(target_user) }} · Профиль пользователя · Farado
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">
      {{ USER_NAME.VALUE(target_user) }}
    </li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block content %}
  <div class="row placeholders">
    <form
        class="row g-3"
        action="/users/user_profile/{{ target_user.id }}"
        method="post">

      <div class="col-md-6">
        <label for="inputLogin" class="form-label">Логин</label>
        <input
            type="text"
            name="target_user_login"
            class="form-control"
            id="inputLogin"
            value="{{ target_user.login }}"
            required>
      </div>

      <div class="col-md-6">
        <label for="inputEmail" class="form-label">Email</label>
        <input
            type="text"
            name="target_user_email"
            class="form-control"
            id="inputEmail"
            value="{{ target_user.email }}">
      </div>

      <div class="col-md-4">
        <label for="inputFirstName" class="form-label">Имя</label>
        <input
            type="text"
            name="target_user_first_name"
            class="form-control"
            id="inputFirstName"
            value="{{ target_user.first_name }}"
            required>
      </div>

      <div class="col-md-4">
        <label for="inputMiddleName" class="form-label">Отчество</label>
        <input
            type="text"
            name="target_user_middle_name"
            class="form-control"
            id="inputMiddleName"
            value="{{ target_user.middle_name }}">
      </div>

      <div class="col-md-4">
        <label for="inputLastName" class="form-label">Фамилия</label>
        <input
            type="text"
            name="target_user_last_name"
            class="form-control"
            id="inputLastName"
            value="{{ target_user.last_name }}"
            required>
      </div>

      <div class="col-md-6">
        <label for="inputPassword" class="form-label">Пароль</label>
        <input
            type="password"
            name="target_user_password"
            class="form-control"
            id="inputPassword">
      </div>

      <div class="col-md-6">
        <label for="inputConfirmPassword" class="form-label">Подтвердите пароль</label>
        <input
            type="password"
            class="form-control"
            id="inputConfirmPassword">
        <span class="badge bg-warning text-dark" id="confirmPasswordMessage"></span>
      </div>

      <div class="col-12">
        <div class="clearfix">
          {# -- Кнопка: сохранить -- #}
            <button
                type="submit"
                id="saveButton"
                class="btn btn-success float-end">
              <i class="bi bi-save"></i> Сохранить
            </button>
          {# -- /Кнопка: сохранить -- #}
        </div>
      </div>

    </form>
  </div>
{% endblock content %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  <script>
    // Confirm password validator
    $('#inputPassword, #inputConfirmPassword').on('keyup', function () {
      if ($('#inputPassword').val() == $('#inputConfirmPassword').val()) {
        $('#confirmPasswordMessage').html('');
        $('#saveButton').prop('disabled', false);
      } else {
        $('#confirmPasswordMessage').html('Passwords do not match');
        $('#saveButton').prop('disabled', true);
      }
    });
  </script>
{% endblock %}
